<template>
  <div class="wrapper" style="position: absolute; z-index: 200;top: 14px;width: auto">
    <div class="selectModelType" >
      <div class="tip"><p>功能面板 | 二三维切换</p></div>
      <el-button type="primary" size="mini" plain @click="switchle('2d')">二维</el-button>
      <el-button type="primary" size="mini" plain @click="switchle('3d')">三维</el-button>
      <el-button type="danger" size="mini" plain @click="switchle('25d')">2.5D</el-button>
      <el-button type="danger" size="mini" plain @click="flyToo()">flyto</el-button>

    </div>
    <!--    <my-viewer :mapProps="mapProps" @viewerisok=""></my-viewer>-->
  </div>
</template>

<script>
  // import myViewer from "../cesiumViewer";
  // import {measureUtils} from "../../script/measureUtils"
  // import {gisStr,gisNum,funct1,funct2} from "../../script/test"
  import cameraRotation from  "../../script/cameraRotation"
  export default {
    name: "switch23D",
    data(){
      return{
        scene:null,
        beginSceneMode:null,

      }
    },
    components:{
      // myViewer
    },
    mounted() {
      this.scene = viewer.scene;
      this.beginSceneMode = viewer.scene.mode;
      viewer.scene.morphTo2D(0.0);//二维

      viewer.entities.add({
        name: "Red box with black outline",
        position: Cesium.Cartesian3.fromDegrees(113.653, 34.74),
        box: {
          dimensions: new Cesium.Cartesian3(20.0, 10.0,1000.0),
          material: Cesium.Color.RED,
          heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND, //RELATIVE_TO_GROUND  CLAMP_TO_GROUND
          //distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000),
        },
      });

      viewer.zoomTo(viewer.entities);

    },
    methods:{
      flyToo(){
        // viewer.camera.flyTo({
        //   destination : Cesium.Cartesian3.fromDegrees(113.653, 34.74, 5000.0),
        //   orientation : {
        //     heading : Cesium.Math.toRadians(360),
        //     pitch : Cesium.Math.toRadians(-50.0),
        //     roll : 0.0
        //   }
        // });
        // viewer.camera.direction = Cesium.Cartesian3.fromDegrees(113.653, 34.74)
        let params = this.getViewExtend();

        // let params = this.viewer.camera.computeViewRectangle();

        let west = parseFloat(params.west);
        let south = parseFloat(params.south);
        let east = parseFloat(params.east);
        let north = parseFloat(params.north);

        let heading = Cesium.Math.toRadians(360.0);
        let pitch = Cesium.Math.toRadians(-70.0);
        let range = 5000.0;

        viewer.camera.lookAt(Cesium.Cartesian3.fromDegrees((west + east) / 2,(south + north)/2), new Cesium.HeadingPitchRange(heading, pitch, range));
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
      },
      switchle(info){

        let params = this.getViewExtend();

        // let params = this.viewer.camera.computeViewRectangle();

        let west = parseFloat(params.west);
        let south = parseFloat(params.south);
        let east = parseFloat(params.east);
        let north = parseFloat(params.north);

        let position;
        let distance;

        switch (info) {
          case '2d':
            viewer.scene.screenSpaceCameraController.enableZoom = false;
            console.log("二维动作开始:" + viewer.camera.position);
            // viewer.camera.setView({//定位到范围中心点
            //   destination: Cesium.Cartesian3.fromDegrees(Number((west + east) / 2), Number((south + north-(north-south)/6)/2), Cesium.Cartographic.fromCartesian(viewer.camera.position).height),
            //   //destination: rectangle,
            //   orientation: {
            //     heading: Cesium.Math.toRadians(360),//1
            //     pitch: Cesium.Math.toRadians(-90),
            //     roll: 0
            //   }
            // });
            //
            // viewer.scene.morphTo2D(0.0);//二维
            //
            // console.log("二维动作完成:" + viewer.camera.position);

            position = Cesium.Cartesian3.fromDegrees((west + east) / 2,(south + north-(north-south)/6)/2);
            distance = viewer.camera.positionCartographic.height;
            cameraRotation.init(position,distance,-89,false);
            break;
          case '3d':
            console.log("三维动作开始前:" + viewer.camera.position);

            viewer.scene.morphTo3D(0.0);//二维
            position = Cesium.Cartesian3.fromDegrees((west + east) / 2,(south + north)/2);
            // let position = Cesium.Cartesian3.fromDegrees(113.653, 34.74);
              // position.z = viewer.camera.position.z;
            distance = Cesium.Cartographic.fromCartesian(viewer.camera.position).height;

            cameraRotation.init(position,distance,-55,true);
            // this.cameraRotation(position,distance,-55,true);

            // let heading = Cesium.Math.toRadians(360);
            // let pitch = Cesium.Math.toRadians(-60);
            //
            // console.log("let position:" + position);
            // console.log("morphTo3D后:" + viewer.camera.position);
            //
            //
            // viewer.scene.camera.setView({
            //   destination: position, // 点的坐标
            //   orientation: {
            //     heading: heading,
            //     pitch: pitch,
            //   }
            // });
            // console.log("setView后:" + viewer.camera.position);
            //
            // viewer.scene.camera.moveBackward(distance);
            // console.log("moveBackward后:" + viewer.camera.position);
            //
            // console.log("三维动作完成:" + viewer.camera.position);

            break;
          case '25d':
            console.log("点击了25d")
            viewer.scene.morphToColumbusView(0.0);//二维
            break
        }
      },

      //回调函数
      cameraRotation(position,distance,toAngle,to3D){
        viewer.camera.cancelFlight();
        let heading = Cesium.Math.toRadians(360);
        let angle = to3D?30:-30; //值越大，旋转越快
        let startTime = Cesium.JulianDate.fromDate(new Date()); //创建一个新实例
        let stopTime = Cesium.JulianDate.addSeconds(startTime, 2, new Cesium.JulianDate()); //2秒后停止
        viewer.clock.startTime = startTime.clone();
        viewer.clock.stopTime = stopTime.clone();
        viewer.clock.currentTime = startTime.clone(); // 当前时间
        viewer.clock.clockRange = Cesium.ClockRange.CLAMPED; // 行为方式
        viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK; // 时钟设置为当前系统时间; 忽略所有其他设置。
        let initialpitch = viewer.camera.pitch;
        let Exection =  () => {
          console.log("onTick:");
          let delTime = Cesium.JulianDate.secondsDifference(viewer.clock.currentTime, viewer.clock.startTime);
          let pitch = Cesium.Math.toRadians(delTime * angle) + initialpitch;
          viewer.scene.camera.setView({
            // destination: position, // 点的坐标
            orientation: {
              heading: heading,
              pitch: pitch,
            }
          });
          viewer.scene.camera.moveBackward(distance);
          if (to3D && Cesium.Math.toDegrees(viewer.camera.pitch) > toAngle) {
            viewer.clock.onTick.removeEventListener(Exection);
          }
          else if(!to3D && Cesium.Math.toDegrees(viewer.camera.pitch) < toAngle){
            viewer.clock.onTick.removeEventListener(Exection);
          }
        };
        viewer.clock.onTick.addEventListener(Exection);

      },

      //获取场景中心坐标
      getViewExtend() {
        let params = {};
        let extend = viewer.camera.computeViewRectangle();
        if (typeof extend === "undefined") {
          //2D下会可能拾取不到坐标，extend返回undefined,所以做以下转换
          let canvas = viewer.scene.canvas;
          let upperLeft = new Cesium.Cartesian2(0, 0);//canvas左上角坐标转2d坐标
          let lowerRight = new Cesium.Cartesian2(
            canvas.clientWidth,
            canvas.clientHeight
          );//canvas右下角坐标转2d坐标

          let ellipsoid = viewer.scene.globe.ellipsoid;
          let upperLeft3 = viewer.camera.pickEllipsoid(
            upperLeft,
            ellipsoid
          );//2D转3D世界坐标

          let lowerRight3 = viewer.camera.pickEllipsoid(
            lowerRight,
            ellipsoid
          );//2D转3D世界坐标

          let upperLeftCartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(
            upperLeft3
          );//3D世界坐标转弧度
          let lowerRightCartographic= viewer.scene.globe.ellipsoid.cartesianToCartographic(
            lowerRight3
          );//3D世界坐标转弧度

          let minx = Cesium.Math.toDegrees(upperLeftCartographic.longitude);//弧度转经纬度
          let maxx = Cesium.Math.toDegrees(lowerRightCartographic.longitude);//弧度转经纬度

          let miny = Cesium.Math.toDegrees(lowerRightCartographic.latitude);//弧度转经纬度
          let maxy = Cesium.Math.toDegrees(upperLeftCartographic.latitude);//弧度转经纬度

          // console.log("经度：" + minx + "----" + maxx);
          // console.log("纬度：" + miny + "----" + maxy);

          params.west = minx;
          params.east = maxx;
          params.south = miny;
          params.north = maxy;
        } else {
          //3D获取方式
          params.east = Cesium.Math.toDegrees(extend.east);
          params.north = Cesium.Math.toDegrees(extend.north);

          params.west = Cesium.Math.toDegrees(extend.west);
          params.south = Cesium.Math.toDegrees(extend.south);
          // console.log("结果：" + JSON.stringify(params))
        }
        return params;//返回屏幕所在经纬度范围
      }

    },
    destroyed() {
      // viewer.scene.mode = this.beginSceneMode
      // mapBaseF.removeAllNtt()
    }
  }
</script>

<style scoped>

</style>
